<template>
    <div>
        <!-- <a-modal :title="operateType==='add'?'新增':'编辑'" :visible.sync="isShow">

        </a-modal> -->
        <a-modal title="新增" :visible="visible" :confirm-loading="confirmLoading"
            ok-text="确认" cancel-text="取消" @ok="handleOk" @cancel="handleCancel">
            <common-form></common-form>

        </a-modal>
        <!-- <common-form></common-form> -->
        <div style="display: flex;justify-content:space-between">
            <a-button @click="adduser" type="primary">
                新增
            </a-button>
            <a-input-search style="width: 300px ;" placeholder="输入电话搜索用户" enter-button="搜索" size="small"
                search-text="搜索" @search="onSearch" />
        </div>
        <a-table :columns="columns" :data-source="duser" bordered>
            <template v-for="col in ['id', 'dName', 'dTel']">
                <div :key="col">

                    <template>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template slot="operation" slot-scope="text, record">
                <div :key="col" class="editable-row-operations">
                    <span>
                        <a @click="() => onDelete(record.id)">删除</a>
                    </span>
                </div>
            </template>
        </a-table>

        <a-table :columns="columns" :data-source="duserlist" bordered>

            <template v-for="col in ['id', 'dName', 'dTel']" slot-scope="text, record">
                <div :key="col">
                    <a-input>lll</a-input>
                    <template :record="duserlist">
                        {{ text }}
                    </template>
                </div>
            </template>
            <template slot="operation" slot-scope="text, record">
                <div style=" display:flex">
                   
                    <div :key="col" class="editable-row-operations">
                        <span>

                            <a @click="() => onDelete(record.id)">删除</a>
                        </span>
                    </div>
                </div>
            </template>
        </a-table>
 
    </div>
</template>
<script>
import CommonForm from '../../src/components/CommonForm.vue';
import { mapState } from 'vuex';

const columns = [
    {
        title: '编号',
        dataIndex: 'id',
        width: '15%',
        scopedSlots: { customRender: 'id' },
    },
   
    {
        title: '姓名',
        dataIndex: 'dName',
        width: '15%',
        scopedSlots: { customRender: 'dName' },
    },
    {
        title: '电话',
        dataIndex: 'dTel',
        width: '15%',
        scopedSlots: { customRender: 'dTel' },
    },
    {
        title: '操作',
        dataIndex: 'operation',
        width: '15%',
        scopedSlots: { customRender: 'operation' },
    },
   
];

const data = [];

export default {
    inject: ['reload'],
  components: { CommonForm },

    data() {
        this.cacheData = data.map(item => ({ ...item }));
        return {
            visible: false,
            confirmLoading: false,
            operateType:'add',
            data,
            columns,
            editingKey: '',
           

        };
    },
    mounted() {
        this.$store.dispatch('dList')
        this.data = [...this.duserlist]
    },

    computed: {
        isShow(){
            return this.$store.state.userinfo.isShow
        },
        ...mapState({
            duserlist: (state) => {
                return state.userinfo.duserlist;
            },

        }),
        ...mapState({
            duser: (state) => {
                return state.userinfo.duser
            }
        })

    },
    methods: {
        updata(record){
            //this.visible = true;
            //this.operateType='edit';
            this.editingKey = record.id;
            this.editable = true;
        },
        adduser(){
            //this.$store.commit('isShow')
            //this.$store.dispatch('dList')
            this.visible = true;
        },
        onSearch(value) {
            value && this.$store.dispatch('duserbytel', value)
        },
        onDelete(key) {
            console.log(key)
            this.$store.dispatch('deluser', key)
            this.reload();
            // const dataSource = [...this.duserlist];
            // this.dataSource = dataSource.filter(item => item.key !== key);
        },
        showModal() {
            this.visible = true;
        },
        handleOk(e) {
            this.visible = false;
        },
        handleCancel(e) {
            console.log('Clicked cancel button');
            this.visible = false;
        },
       

    },

};
</script>
<style scoped>

.editable-row-operations a {
    margin-right: 8px;
}

</style>
